<template>
  <div class="login-container">
    <div class="left" />
    <div class="right">
      <div class="box">
        <h3>登录</h3>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" label-position="left">
          <el-form-item label="用户名: " prop="mobile">
            <el-input v-model="ruleForm.mobile" />
          </el-form-item>
          <el-form-item label="密码: " prop="password" show-password>
            <el-input v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <!-- `checked` 为 true 或 false -->
            <el-checkbox v-model="ruleForm.isAgree">用户平台使用协议</el-checkbox>
          </el-form-item>
          <!-- 登录 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>
// import service from '@/utils/request.js'
const validateIsArray = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请必须勾选用户的使用协议'))
    // console.log('1111')
  } else {
    callback()
  }
}

export default {
  name: 'UserLogin',
  data() {
    return {
      ruleForm: {
        // mobile: '13800000002',
        mobile: process.env.NODE_ENV === 'development' ? '13800000002' : '',
        password: '123456',
        isAgree: false
      },
      rules: {
        mobile: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^1[3|5|6|7|8|9]\d{9}$/, message: '手机号格式不对', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度应该为6-16位之间', trigger: 'blur' }
        ],
        isAgree: [
          { validator: validateIsArray, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          // 后台就是在这个里面发登录请求
          // 第一步去官网看axios.发请求代码，找一个post请求的模板过来
          // 第二步去看接口文档，找登录接口，(去问后端)
          // 第三部，看接口文档的出参（接口的返回值）和入参（接口需要的参数）
          // axios.post('https://heimahr.itheima.net/api/sys/login', {
          // service.post('/sys/login', {
          //   mobile: this.ruleForm.mobile,
          //   password: this.ruleForm.password
          // }).then(function(response) {
          //   console.log(response)
          // }).catch(function(error) {
          //   console.log(error)
          // })
          // alert('submit!')
          // sysLoginRuquest({
          //   mobile: this.ruleForm.mobile,
          //   password: this.ruleForm.password
          // }).then(res => {
          //   console.log('请求成功', res)
          // })

          try {
            // const data = await sysLoginRuquest({
            //   mobile: this.ruleForm.mobile,
            //   password: this.ruleForm.password
            // })
            // console.log('封装请求成功', data)
            // 调用actions里面的方法把token存起来
            //  第二个参数，就是传递给actions的载荷， 在actions里面接收
            this.$store.dispatch('user/loginAction', {
              mobile: this.ruleForm.mobile,
              password: this.ruleForm.password
            })
          } catch (err) {
            // console.log('错误')
          }
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scope>
.login-container{
  height: 100vh; //视口新单位 vw vh
  width: 100%;
  // background-color: skyblue ;
  display: flex;
  //默认flex布局的主轴方向
  .left{
    //第一个1 有剩余空间是否扩大 flex-grow
    //第二个1 空间不够是否自动缩写 flex-shrink
    //第三个值, flex基准宽度(高度)
    //flex: 1  1  0%
    flex: 3;
// background-color: #fff;
/* /1.如果在css里面用了@符号，必须在@前面加个~，告诉浏
览器，去查找编译之后的图片地址
background-image: url(~@/assets/common/login_back.png);
2.如果使用相对路径，不使用@符号 */
background-image: url(~@/assets/common/login_back.png);
//占满
background-size: cover;
background-repeat: no-repeat;
//  border-top-right-radius: 60px;
// background-position: center;
  }
  .right{
// background-color: teal;
flex: 2;
display: flex;
justify-content: center;
align-items: center;
.box{
  // width: 200px;
  // height: 200px;
  // background-color: pink;
   .el-input {
      width: 350px;
      height: 44px;
   }
    h1 {
      padding-left: 10px;
      font-size: 24px;
    }

}
  }
  .el-checkbox__label {
  padding-top: 10px;
  padding-bottom: 20px;
}
}
</style>
